Adwaita: generic type styles

- try to define a basic typographic structure

See https://gitlab.gnome.org/GNOME/gtk/issues/1808

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index e8f2409442cfe7b9d3b745928387e7651cb352e3..4f0977e259b9924e2de299807cd728f82fbf113a 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -260,6 +260,31 @@ spinner {
   }
 }
 
+/**********************
+ * General Typography *
+ **********************/
+
+.type-large-title {
+   font-weight: 300;
+   font-size: 24pt;
+   letter-spacing: 0.2rem;
+}
+.type-title {
+   font-weight: 600;
+   font-size: 16pt;
+}
+.type-heading {
+   font-weight: 500;
+   font-size: 11pt;
+}
+.type-body {
+   font-weight: 400;
+   font-size: 11pt;
+}
+.type-caption {
+   font-weight: 400;
+   font-size: 9pt;
+}
 
 /****************
  * Text Entries *

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 8dbbcb081abdf8a932a661dc0963fa788e040b9f..d1cd399c484adbd7f36e0a8aec1852a56da49eda 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -93,6 +93,17 @@ spinner:checked { opacity: 1; animation: spin 1s linear infinite; }
 
 spinner:checked:disabled { opacity: 0.5; }
 
+/********************** General Typography * */
+.type-large-title { font-weight: 300; font-size: 24pt; letter-spacing: 0.2rem; }
+
+.type-title { font-weight: 600; font-size: 16pt; }
+
+.type-heading { font-weight: 500; font-size: 11pt; }
+
+.type-body { font-weight: 400; font-size: 11pt; }
+
+.type-caption { font-weight: 400; font-size: 9pt; }
+
 /**************** Text Entries * */
 spinbutton:not(.vertical), spinbutton.vertical text, entry { min-height: 32px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: white; border-color: #1b1b1b; background-color: #2d2d2d; box-shadow: inset 0 0 0 1px rgba(21, 83, 158, 0); }
 

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 1626af8d757e3bd5b3fd2222f376d7ad0f820dd4..f3f09d395ebc8161c57725760a29d73ea8b81279 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -93,6 +93,17 @@ spinner:checked { opacity: 1; animation: spin 1s linear infinite; }
 
 spinner:checked:disabled { opacity: 0.5; }
 
+/********************** General Typography * */
+.type-large-title { font-weight: 300; font-size: 24pt; letter-spacing: 0.2rem; }
+
+.type-title { font-weight: 600; font-size: 16pt; }
+
+.type-heading { font-weight: 500; font-size: 11pt; }
+
+.type-body { font-weight: 400; font-size: 11pt; }
+
+.type-caption { font-weight: 400; font-size: 9pt; }
+
 /**************** Text Entries * */
 spinbutton:not(.vertical), spinbutton.vertical text, entry { min-height: 32px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: black; border-color: #cdc7c2; background-color: #ffffff; box-shadow: inset 0 0 0 1px rgba(53, 132, 228, 0); }